<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css" rel="stylesheet"/>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
    <!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/TXLivePlayer-1.2.0.min.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>
    <style>
        p img{
            width: 20px;
            height: 20px;
        }
    </style>

</head>
<body>
<div id="app">
    请输入商户ID：<input type="text" v-model="uid"><br>

    <div style="float: left">
        <video id="player-container-id" preload="auto" playsinline webkit-playsinline>
        </video>
        <input type="text" v-model="username">
        <input type="button" value="开始观看" @click="start">
    </div>


    <div style="width: 300px; height: 500px; background-color: pink; float: right">
        <div style="width: 300px; height: 470px; background-color: lightgreen;">
            <p v-for="msg in msgContent" v-html="msg"></p>
        </div>
        <div>
            <img src="wx.png" style="width: 20px; height: 20px" @click="appendImg('【wx】')">
        </div>
        <input type="text" v-model="message"><input type="button" value="发送" @click="send">
    </div>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            username:'',
            websocket:null,
            message:'',
            msgContent: [],
            uid:'user1'
        },
        methods:{
            start(){
                var player = TCPlayer('player-container-id', {
                    'autoplay':true,
                    'width':800,
                    'height':500,
                }); // player-container-id 为播放器容器 ID，必须与 html 中一致
                player.src('webrtc://ngw.huangyj.cn/live/'+this.uid);
                //重新创建一个websocket对象  赋值给自己定义的对象  后端的链接地址  ws协议
                this.websocket = new WebSocket("ws://localhost:8080/chat/"+this.username+"/"+this.uid)

                //因为function内的this就成了方法的this而不是全局的this
                var that = this;
                this.websocket.onmessage = function (res) {
                    var msg = res.data;

                    if(msg=='out'){
                        location.href='error.html';
                    }

                    that.msgContent.push(msg);
                }

            },
            send(){
                this.websocket.send(this.message);
                this.message = '';
            },
            appendImg(img){
                this.message += img;
            }
        },
        created(){

        }
    })
</script>

</body>
</html>